<template>
  <div id="footer">
    <ul>
      <router-link tag="li" to="/movie" @click.native="send(movie)"">
        <i class=" fa fa-film"></i>
        <p>电影</p>
      </router-link>
      <router-link tag="li" to="/cinema" @click.native="send(cinema)">
        <i class="fa fa-square"></i>
        <p>影院</p>
      </router-link>
      <router-link tag="li" to="/user" @click.native="send(user)">
        <i class="fa fa-user-circle"></i>
        <p>我的</p>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Footer',
  data() {
    return {
      movie: '神影影院',
      cinema: '神影影院',
      user: '我的影院'
    }
  },
  methods: {
    send(val) {
      this.$emit('sendValue', val)
    }
  }
}
</script>

<style scoped>
#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  background-color: white;
  border-top: 2px solid #ccc;
}

li {
  width: 33.3%;
  display: inline-block;
}
.router-link-active {
  color: #e54847;
}
</style>